<script lang="ts" setup>
import {ref} from "vue";

defineOptions({
  name: "PageDrawer"
});

const drawerVisible = ref(false)
const loading = ref(false)
defineExpose({
  drawerVisible
})

/**-------------------参数-------------------**/
const {title,direction,showClose,size,modal,closeOnClickModal,closeOnPressEscape,handlerConfirm,handlerCancel} = defineProps({
  title:{
    type: String,
    required:true
  },
  direction:{
    type: String,
    default: 'rtl'
  },
  showClose:{
    type: Boolean,
    default: true
  },
  size:{
    type: String || Number,
    default: '40%'
  },
  modal:{
    type: Boolean,
    default: true
  },
  closeOnClickModal:{
    type: Boolean,
    default: false
  },
  closeOnPressEscape:{
    type: Boolean,
    default: false
  },
  handlerConfirm:{
    type: Function,
    default: ()=>{}
  },
  handlerCancel:{
    type: Function,
    default: ()=>{}
  }
})

/**-------------------事件回调-------------------**/
//取消
const dialogCancel = async ()=>{
  loading.value = true
  try{
    await handlerCancel()
  }finally {
    loading.value = false
  }
}
//确定
const dialogConfirm = async ()=>{
  loading.value = true
  try{
    await handlerConfirm()
  }finally {
    loading.value = false
  }
}
</script>

<template>
  <div>
    <el-drawer
      v-model="drawerVisible"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :direction="direction"
      :modal="modal"
      :show-close="showClose"
      :size="size"
      :title="title"
      :z-index="99999"
    >
      <slot />
      <template #footer>
        <div class="drawer-footer">
          <el-button :loading="loading" @click="dialogCancel">取消</el-button>
          <el-button :loading="loading" type="primary" @click="dialogConfirm">
            确认
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>

</style>
